<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>e车险保</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bootstrap-table.min.css">
  <link rel="stylesheet" href="css/main.css?v=123">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/user_manage.css?v=123">
  <link rel="stylesheet" href="css/agencyTree.css?v=124">
</head>
<body>
  <header>
    <img class="logo" src="images/logo.png">
    <div class="user-box">
      <i class="portrait"></i>
      <span class="user">13688479164</span>
      <i class="logout"></i>
    </div>
  </header>
  <div class="top-nav">
    <i class="left-arrow one-nav"></i><!--
    --><div class="navs">
        <a class="one-nav active" href="#" data-index="0">
        <img src="images/user_manage.png" alt=""><br>
        <span class="title">用户管理1</span>
        </a>
        <a class="one-nav" href="#" data-index="1">
          <img src="images/user_manage.png" alt=""><br>
          <span class="title">用户管理2</span>
        </a>
        <a class="one-nav" href="#" data-index="2">
          <img src="images/user_manage.png" alt=""><br>
          <span class="title">用户管理3</span>
        </a>
        <a class="one-nav" href="#" data-index="3">
          <img src="images/user_manage.png" alt=""><br>
          <span class="title">用户管理4</span>
        </a>
        <a class="one-nav" href="#" data-index="4">
          <img src="images/user_manage.png" alt=""><br>
          <span class="title">用户管理5</span>
        </a>
        <a class="one-nav" href="#" data-index="5">
          <img src="images/user_manage.png" alt=""><br>
          <span class="title">用户管理6</span>
        </a>
        <a class="one-nav" href="#" data-index="6">
          <img src="images/user_manage.png" alt=""><br>
          <span class="title">用户管理7</span>
        </a>
        <a class="one-nav" href="#" data-index="7">
          <img src="images/user_manage.png" alt=""><br>
          <span class="title">用户管理8</span>
        </a>
        <a class="one-nav" href="#" data-index="8">
          <img src="images/user_manage.png" alt=""><br>
          <span class="title">用户管理9</span>
        </a>
    </div><!--
    --><i class="right-arrow one-nav"></i>
  </div>
  <div class="sub-nav">
    <a class="active">用户列表</a>
    <a>用户扩展属性</a>
    <a>团队管理</a>
  </div>
  <div class="content-box">
    <div class="search-box">
      <form class="form-inline">
        <div class="form-group">
          <label for="nickname">昵称</label><input type="text" id="nickname" class="form-control">
        </div>
        <div class="form-group">
          <label for="username">用户姓名</label><input type="text" id="username" class="form-control">
        </div>
        <div class="form-group">
          <label for="register-date-from">注册时间</label>
          <div class="input-group" style="margin-left:5px;">
            <div class="input-group-addon">from</div>
            <input type="text" class="form-control" id="register-date-from">
            <div class="input-group-addon">to</div>
            <input type="text" class="form-control" id="register-date-to">
          </div>
        </div>
        <div class="form-group">
          <label for="mobile">手机号</label><input type="tel" id="mobile" class="form-control">
        </div>
        <br>
        <div class="form-group">
          <label>是否锁定</label>
          <label class="radio-inline">
            <input type="radio" name="is_lock" id="is_lock_yes" value="option1"> YES
          </label>
          <label class="radio-inline">
            <input type="radio" name="is_lock" id="is_lock_no" value="option2"> NO
          </label>
          <label class="radio-inline">
            <input type="radio" name="is_lock" id="is_lock_all" value="option3"> All
          </label>
        </div>
        <div class="form-group">
          <label>实名认证</label>
          <label class="radio-inline">
            <input type="radio" name="is_certification" id="is_certification_yes" value="option1"> YES
          </label>
          <label class="radio-inline">
            <input type="radio" name="is_certification" id="is_certification_no" value="option2"> NO
          </label>
          <label class="radio-inline">
            <input type="radio" name="is_certification" id="is_certification_all" value="option3"> All
          </label>
          <label class="radio-inline">
            <input type="radio" name="is_certification" id="is_certification_Undefined" value="option3"> Undefined
          </label>
        </div>
        <br>
        <div class="button-group">
          <div class="button-box">
            <input type="button" value="reset search" class="reset">
            <i class="reset-icon"></i>
          </div>
          <div class="button-box pull-right">
            <input type="button" value="search" class="search">
            <i class="search-icon"></i>
          </div>
        </div>
      </form>
    </div>
    <div class="content container-fluid" style="padding-bottom: 20px">
      <table id="table" class="table"></table>
    </div>
  </div>
  <div class="my-alert"></div>
  <div class="modal fade" tabindex="-1" role="dialog" id="agent-tree">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title"><span>{{shareName}}</span>的分享</h4>
        </div>
        <div class="modal-body tree" id="my-app">
          <ul id="my_superior" v-if="MyAgentOwner">
            <li>
              <span><i></i>{{MyAgentOwner.userName != "" ? MyAgentOwner.userName : MyAgentOwner.aliasName}}</span>
            </li>
          </ul>
          <ul class="outer_ul">
            <li>
              <span><i class="icon icon-minus-sign" v-if="MyAgent.length > 0"></i> {{shareName}}</span>
              <ul>
                <li v-for="item in MyAgent" v-if="MyAgent.length > 0">
                  <span>
                      <i class="icon icon-minus-sign" v-if="item.agent != null"></i>
                      {{(item.aliasname != "")?item.aliasname:item.userid}}
                  </span>
                  <ul v-if="item.agent && item.agent != null">
                    <li v-for="item_child in item.agent">
                      <span><i :class="(item_child.agent != null) ? ('icon icon-minus-sign') : '' "></i> {{(item_child.aliasname != null)?item_child.aliasname:item_child.userid}}</span>
                      <ul v-if="item_child.agent != null" >
                        <li class="icon icon-minus-sign" v-for="item_child_child in item_child.agent">
                          <span style="font-family: nomal;color:#000;"><i></i> {{(item_child_child.aliasname != "")?item_child_child.aliasname:item_child_child.userid}}</span>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</body>
</html>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/common.js?x=678"></script>
<script src="js/userManage.js"></script>
<script>
    var vm;
  $(function(){
      vm = new Vue({
          el:"#agent-tree",
          data:{
              MyAgentOwner:undefined,
              MyAgent:[],
              shareName:""
          },
          methods:{

          },
          updated:function(){
              initTreeStyle();
          }
      });
      initTable();
  });
  function initTreeStyle(){
      $("li").show();
      $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
      $('.tree li.parent_li > span').unbind("click");
      $('.tree li.parent_li > span').on('click', function(e) {
          var children = $(this).parent('li.parent_li').find(' > ul > li');
          if (children.is(":visible")) {
              children.hide('fast');
              $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
          } else {
              children.show('fast');
              $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
          }
          e.stopPropagation();
      });
  }

  //获取用户列表
  function getCustomers(){
      initTable();
  }


  function initTable(){
      var option = {
          url:ip + "userslist",
          method:"post",
          dataType:"json",
          contentType:'application/json; charset=utf-8',
          queryParams:function(params) {
              var params = JSON.stringify({
                  "pageNumber":params.offset,
                  "pageSize":params.limit
              });
              return params;
          },
          responseHandler: responseHandler,
          pageNumber:1,
          pageSize:10,
          pageList:[10, 25, 50, 100, "All"],
          //onlyInfoPagination:true,
          columns: [
              {
                  field: 'id',
                  title: 'id',
                  visible:false
              },
              {
                  field: 'aliasName',
                  title: '昵称',
                  align : 'center',
                  valign : 'middle',
                 // sortable : true
              },
              {
                  field : 'userName',
                  title : '用户姓名',
                  align : 'center',
                  valign : 'middle',
                 // sortable : true
              }, {
                      field : 'registerTime',
                      title : "注册时间",
                      align : 'center',
                      valign : 'middle',
                    //  sortable : true,
                      formatter : function (value, row, index){
                          return value.split(" ")[0];
                      }
              }, {
                  field : 'mobile',
                      title : '手机号',
                      align : 'center',
                      valign : 'middle'
              }, {
                  field : 'isRealName',
                      title : '实名认证',
                      align : 'center',
                      valign : 'middle',
                      formatter:function(value, row, index){
                          return value == 1 ? "是" : "否";
                      },
                      //sortable : true
              }, {
                  field : 'agentNumber',
                      title : '一级/二级/三级',
                      align : 'center',
                      valign : 'left'
              },{
                  field : 'operation',
                  title : '层级树状图',
                  align : 'center',
                  valign : 'left',
                  formatter:function(value, row, index){
                      return "<a class='showTree'>查看<i class='tree-icon'></i></a>";
                  },
                  events:{
                      'click .showTree': function(e, value, row, index) {
                          console.log(row);
                          var name = row.userName != "" ? row.userName : row.aliasName;
                          if(row.agentNumber.split("/")[0] == '0'){
                              my_alert("暂时没有下级分享信息！");
                          }else{
                              getAgencyTree(row.id,name);
                          }

                      }
                  }
              }
          ],
          onLoadSuccess:function(data){


          },
          onLoadError:function(status){
              console.log(status);
          },
          pagination:true,
          sidePagination:"server",
          pageNumber:1,
          paginationHAlign:"right"
      };
      $('#table').bootstrapTable(option);
  }
  function responseHandler(res){
      console.log(res);
      if(res.code == "0004"){
          window.location.href = "login.html";
      }
      if (res) {
          return {
              "rows" : res.Data,
              "total" : res.Total
          };
      } else {
          return {
              "rows" : [],
              "total" : 0
          };
      }
  }

  function getAgencyTree(id,name){
      var url = ip + "myagentInfo";
      $.ajax({
          url:url,
          type:'post',
          dataType:"json",
          contentType:'application/json; charset=utf-8',
          data:JSON.stringify({"userid":id}),
          success:function(data){
              console.log(data);
              if(data.Status == "0000"){
                  if(data.MyAgentOwner.userId != 0){
                      vm.MyAgentOwner = data.MyAgentOwner;
                  }else{
                      vm.MyAgentOwner = undefined;
                  }
                  console.log(data.MyAgent.agent);
                  if(data.MyAgent[0].agent != null ){
                      console.log(111);
                      vm.MyAgent = data.MyAgent[0].agent;
                      vm.shareName = name;
                      $("#agent-tree").modal();
                  }else{
                      my_alert("暂时没有下级分享信息！");
                  }
              }
          },
          error:my_error
      });
  }
</script>
